<template>
  <!-- 树状列表组件 -->
  <div class="treeModule">
    <ul class="pond-list">
      <li class="pond-item" :class="{ active: btnActiveClass == item.fishPondId }" @click="selectPond(item)"
        v-for="(item, index) in pondList" :key="index + 'pond'">
        <span>{{ item.pondName }}</span>
      </li>
    </ul>
  </div>
</template>
<script>
import FishPondApi from "@/api/basic-info-manage/fishPond";
export default {
  data () {
    return {
      pondList: [],
      btnActiveClass: 0,
    }
  },
  async mounted () {
    await this.gettreelist()
  },
  methods: {
    handleSelectionChange (e) {
      this.$emit("treeselectvalue", e)
    },
    // 获取鱼塘
    gettreelist () {
      FishPondApi.queryByCondition().then(res => {
        if (res.success) {
          this.pondList = res.data;
          this.pondList = this.pondList.filter(item => { return item.pondName.indexOf('监控') == -1 })
          this.btnActiveClass = this.pondList[0]?.fishPondId
          this.$emit("treeselectvalue", this.pondList[0]?.fishPondId)
        }
      })
    },
    selectPond (item) {
      this.$emit("treeselectvalue", item.fishPondId)
      this.btnActiveClass = item.fishPondId;
    }
  }
}
</script>
<style lang="scss" scoped>
.treeModule {
  height: 100%;
  width: 100%;
  padding: 20px;
  background-color: #ffffff;
}

.pond-list {
  width: 100%;
  list-style-type: none;
  padding-inline-start: 0;



  .pond-item {
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #f0f0f0;
    height: 28px;
    line-height: 28px;
    background-color: transparent;
    color: rgb(10, 114, 211);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    &:hover {
      width: 100%;
      border: 1px solid #c0c0c0;
    }

    span {
      font-size: 14px;
    }
  }

  .active {
    background-color: #4b8bc9;
    color: #ffffff
  }
}
</style>
